const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const ExtractTextPlugin = require("extract-text-webpack-plugin")
module.exports = {
    entry: path.join(__dirname, 'src/main.js'), // 入口文件
    output: {
        filename: '[name].[hash].js',
        path: path.resolve(__dirname, "dist")
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                exclude: /node_modules/,
                loader: 'vue-loader',
                options: {
                    extractCSS: true, // 会把vue中的样式文件提取出来
                    loaders: {
                        css: ExtractTextPlugin.extract({
                            use: 'css-loader',
                            fallback: 'vue-style-loader'
                        }),
                        styl: ExtractTextPlugin.extract({
                            use: 'css-loader!stylus-loader',
                            fallback: 'vue-style-loader'
                        })
                    },
                    postLoaders: {
                        html: 'babel-loader'
                    }
                }
            },
            // {
            //     test: /\.vue$/,
            //     exclude: /node_modules/,
            //     use: ['vue-loader']
            // },
             {
                test: /\.less$/,
                exclude: /node_modules/,
                use: [
                    // "style-loader",
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    'postcss-loader',
                    "less-loader"
                ]
            },
            {
                test: /\.(png|jpg|svg|webp|jpeg)$/,
                exclude: /node_modules/,
                use: {
                    loader: "url-loader",
                    options: {
                        esModule: false,
                        limit: 50 * 1024,
                        name: "[hash:10].[ext]"
                    }
                }
            },
        ]
    },
    // 还需要添加以下内容
    resolve: {
        alias: {
            //确定vue的构建版本
            'vue$': 'vue/dist/vue.esm.js'
        },
        extensions: ['*', '.js', '.vue', '.json']
    },
    plugins: [
        new HtmlWebpackPlugin({
            templateParameters: {
                BASE_URL: './'
            },
            title: "zzy Webpack Vue App",
            template: path.join(__dirname, "./public/index.html"),//指定模版文件路径
            filename: "index.html"//设置内存中页面名称
        }),
        new MiniCssExtractPlugin({
            filename: "[name][contentHash:8].css",
            chunkFilename: "[id].css"
        }),
        
        new VueLoaderPlugin(),
        new CleanWebpackPlugin()
    ]
}